<template>
  <Layout class="enter">
    <Header>
      <v-header></v-header>
    </Header>
    <Content>
      <div class="rowWrapperP">
        <Row
          :gutter="32"
          style="padding:50px 0"
        >
          <Col span="12">
          <Card
            :bordered="false"
            style="height:500px"
          >
            <p
              slot="title"
              class="title"
            >世贸简介</p>
            <p
              slot="title"
              class="fontClor"
            >World trade trends</p>
            <p>又一城网络科技有限公司，是一家以IT和大数据技术驱动零售业发展的高科技型企业。作为国内领先的全渠道零售服务商，致力于为商家、企业和区域提供一体化的零售服务。
              <br>
              <br>凭借积极探索零售变化与商业变革，历经十多年的服务积累与经验沉淀，又一城根据零售商不同的行业和经营特点，输出多元化的零售服务，提供与之匹配的PMS全渠道零售技术，打通PC端、移动端、门店端的零售经营数据，为企业搭建数字化零售平台，实现线上线下深度融合。
              <br>
              <br>本着服务零售的初心与责任，又一城率先践行，成功落地新零售样板工程，以此研究并输出品类管理、咨询培训、内容营销、门店工程等系列零售运营服务。同时，还构建了零售共享体系，提供商品、渠道、会员、第三方服务等商业资源共享，真正帮助零售商提升运营管理效率、降低供应链管理成本，共建高效的新零售模式，引领品牌变革。
            </p>
          </Card>
          </Col>
          <Col
            span="12"
            style="height:500px"
          >
          <video-player
            class="video-player-box"
            ref="videoPlayer"
            :options="playerOptions"
          ></video-player>
          </Col>
        </Row>
      </div>
      <Row class="ryzz">
        <Col span="24">
        <Card
          :bordered="false"
          dis-hover
        >
          <p
            slot="title"
            class="title"
          >荣誉资质</p>
          <p
            slot="title"
            class="fontClor"
          >World trade trends</p>
          <Row>
            <Col span="24">
            <div class="swiper-container swiper-container-enter">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <Row :gutter="8">
                    <Col span="6">
                    <img
                      src="../assets/enter/investment.png"
                      alt
                      srcset
                    >
                    </Col>
                    <Col span="6">
                    <img
                      src="../assets/enter/investment.png"
                      alt
                      srcset
                    >
                    </Col>
                    <Col span="6">
                    <img
                      src="../assets/enter/investment.png"
                      alt
                      srcset
                    >
                    </Col>
                    <Col span="6">
                    <img
                      src="../assets/enter/investment.png"
                      alt
                      srcset
                    >
                    </Col>

                  </Row>
                </div>

              </div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
            </Col>
          </Row>
        </Card>
        </Col>
      </Row>
      <Row class="fzlc">
        <Col span="24">
        <Card
          :bordered="false"
          dis-hover
        >
          <p
            slot="title"
            class="title"
          >发展历程</p>
          <p
            slot="title"
            class="fontClor"
          >World trade trends</p>
          <Row
            class="contentMid"
            type="flex"
            justify="center"
          >
            <Col
              :lg="{span:4,offset:6}"
              class="left"
            >
            <Timeline>
              <TimelineItem>
                <p class="time">1976年</p>
                <p class="content">Apple I 问世</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">1984年</p>
                <p class="content">发布 Macintosh</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2007年</p>
                <p class="content">发布 iPhone</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2010年</p>
                <p class="content">发布 iPad</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2011年10月5日</p>
                <p class="content">史蒂夫·乔布斯去世</p>
              </TimelineItem>
            </Timeline>
            </Col>
            <Col :lg="{span:10,offset:4}">
            <Timeline>
              <TimelineItem>
                <p class="time">1976年</p>
                <p class="content">Apple I 问世</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">1984年</p>
                <p class="content">发布 Macintosh</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2007年</p>
                <p class="content">发布 iPhone</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2010年</p>
                <p class="content">发布 iPad</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2011年10月5日</p>
                <p class="content">史蒂夫·乔布斯去世</p>
              </TimelineItem>
            </Timeline>
            </Col>
          </Row>
        </Card>
        </Col>
      </Row>
    </Content>
    <Footer>
      <v-footer></v-footer>
    </Footer>
  </Layout>
</template>

<script>
import vHeader from '../components/main_header'
import vFooter from '../components/main_footer.vue'
export default {
  name: 'enter',
  components: {
    vHeader,
    vFooter
  },
  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "",
            // src:
            // "http://sante.weixinbe.com/public/supplier/1527739003138040.mp4" //url地址
            src: "http://www.html5videoplayer.net/videos/madagascar3.mp4" //url地址
            // src: "" //url地址
          }
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      }
    }

  },
  mounted() {
    new Swiper(".swiper-container-enter", {
      autoplay: true, //可选选项，自动滑动
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  },
}
</script>

<style lang="less">
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
  height: 500px !important;
}
.ryzz {
  padding: 50px 13%;
  background: url("../assets/enter/zzbg.png") no-repeat center;
  background-size: 100% 100%;
  .ivu-card {
    background: none;
    .ivu-col{
      img{
        width: 100%;
      }
    }
  }
  .ivu-card-head p {
    text-align: center;
  }
}
.fzlc {
  padding: 50px 13%;
  background: url("../assets/enter/posBottm.png") no-repeat center bottom;
  background-size: 100% 30%;
  .ivu-card {
    background: url("../assets/enter/positionBg.png") no-repeat center top;
    background-size: 150px 100%;
  }
  .left {
    .ivu-timeline {
      .ivu-timeline-item-tail {
        border: none;
        width: 100%;
        border-right: 1px solid #e8eaec;
        left: -6px;
      }
      .ivu-timeline-item-content {
        text-align: right;
        p {
          padding-right: 24px;
        }
      }
      .ivu-timeline-item-head {
        right: 0;
      }
    }
  }
}
</style>